
import { WeElement, define } from 'omi'
import {get} from '../../../utils/util'
import {GetCart,AddCart,UpDateCartNum,DelCart} from '../../../api/api.js'
import './index.css'

const app = getApp();

define('page-my_order', class extends WeElement {
  config = {
    navigationBarTitleText: '购物车'
  }

  data = {
    logo:"",
    image:{
      add: require('../../../images/add.png'),
      dec: require('../../../images/dec.png'),
    },
    sumMoney:0,//总价
    cart:[],  //购物车列表
    selectAll : false,  // 全选
    total_num:0
  }
  del_cart=(e)=>{
    let { id, cartid } = e.currentTarget.dataset;
    get(DelCart, {
      cart_id: this.data.cart[id].cart_id
    })
    this.data.cart.splice(id, 1);
    this.update()
  }

  addNumber = (e) => {
    let { id, cartid } = e.currentTarget.dataset;
    this.data.cart[id].goods_num++;
    this.data.sumMonney += this.data.cart[id].goods_price;
    get(UpDateCartNum, {
      cart_id: cartid,
      goods_num: this.data.cart[id].goods_num
    })
    this.calcSumMoney()
    this.update();
  }
  decNumber = (e) => {
    let { id, cartid } = e.currentTarget.dataset;
    if (this.data.cart[id].goods_num > 1) {
      this.data.cart[id].goods_num--;
      this.data.sumMonney -= this.data.cart[id].goods_price;
      get(UpDateCartNum, {
        cart_id: cartid,
        goods_num: this.data.cart[id].goods_num
      })
      this.calcSumMoney();
      this.update();
    }else{
      wx.showToast({
        title: '商品不可少于1个',
        icon: 'none',
        duration: 1500,
        mask: false,
      });
    }
  }

  calcSumMoney(){
    let sumMoney = 0;
    let isSelectAll = true;
    this.data.cart.forEach( (item)=>{
      if( item.selected ){
        sumMoney += (item.goods_price * item.goods_num);
      }else{
        isSelectAll = false;
      }
    });
    this.data.selectAll = isSelectAll;
    this.data.sumMoney = sumMoney;
  }


  selectOne = (e) =>{
    let index = e.currentTarget.dataset.index;
    this.data.cart[index]['selected'] = !this.data.cart[index]['selected'];
    if(!this.data.cart[index]['selected']){
      this.data.selectAll = false;
    }
    this.calcSumMoney();
    this.update();
  }


  selectAll = () =>{
    this.data.selectAll = !this.data.selectAll;
    let sumMoney = 0;
    this.data.cart.forEach( (item)=>{
      item.selected = this.data.selectAll;
      if(this.data.selectAll){
        sumMoney += (item.goods_price * item.goods_num);
      }
    });
    this.data.sumMoney = sumMoney;
    this.update();
  }

  createOrder = () =>{
    let cartSelected = this.data.cart.filter( (item)=>{
      if( item.selected ){
        let [ name , spec ] = item.goods_name.split(' ');
        item.goods_name = name;     // 商品名
        item.goods_spec = spec;     // 商品规格
        return item;
      }
    })
    console.log(cartSelected);
    app.globalData.cartSelected = cartSelected;

    wx.navigateTo({
      url: '../../create_order/index'
    });
  }

  install() {
    
    this.data.logo = require('../images/logo.png'),
    wx.showLoading({
      title: '正在加载',
      mask: false,
    });
    //获取购物车
    get(GetCart).then((res)=>{
      console.log("res.data",res.data);
      this.data.cart=res.data;  
      this.data.total_num = this.data.cart.length;
      
      this.update();
      console.log('获取购物车',res);
      wx.hideLoading();

    })
      
    this.update()
  }
  
  render() {
    let { cart , selectAll , sumMoney , total_num } = this.data;
    return (
      <view class="container">
       <view class='total_num' >共{total_num}件宝贝</view>
        <view class="content">
       { cart.map((item,index)=>
          <view class="orders" key={item.cart_id}>
            <swiper previous-margin="610rpx" >
              <swiper-item class="goodsMsg">
                <view class={['select_btn', item.selected?'active':'']} bindtap='selectOne' data-index={index} ></view>
                <image class="pic" src={item.goods_image}></image>
                <view class="order_content">
                  <view class="order_name">{item.goods_name}</view>
                  <view class="order_count">
                    <view class="price">&yen; {item.goods_price}</view>
                    <view class='cart-item-action'>
                      <view class='cart-dec'  data-id={index} data-cartid={item.cart_id} bindtap="decNumber" >-</view>
                      <view class='goods_num'>{item.goods_num}</view>
                      <view class='cart-add'  data-id={index} data-cartid={item.cart_id} bindtap="addNumber">+</view>
                    </view>
                  </view>
                </view>
              </swiper-item>
              <swiper-item class="delBtn">
                <view data-id={index} data-cartid={item.cart_id} bindtap={this.del_cart} >删除</view>
              </swiper-item>
            </swiper>
          </view>
          )}
        <view class='bottom_bar'>
          <view class="select_all"  bindtap='selectAll'>
            <view class={['select_btn', selectAll?'active':'']} ></view>
            <view>全选</view>
          </view>

          <view  class='pay_bar' >
            <view>合计：&yen;{sumMoney}</view>
            <view class='pay_btn' bindtap='createOrder' >结算</view>
          </view>


        </view>


        </view>
      </view>
    )
  }
})